<script>
import * as echarts from "echarts";
export default {
  name: "MyChart",
  props:['key1','echat_width','echat_height'],
  data(){
    return {
      echart:null,
    }
  },
  mounted() {
    this.echart = echarts.init(this.$refs.main)
    this.echart.setOption(this.key1);
  },
  watch:{
    key1:{
        deep:true,
        immediate:true,
        handler(newVal){
          if(this.echart){  //判断echart有值后，再进行赋值，否则会报异常
            this.echart.setOption(newVal);
          }
        }
    }
  }
}
</script>

<template>
  <div ref="main" :style="{width:echat_width+'px',height:echat_height+'px'}"></div>
</template>

<style scoped>

</style>